<template>
    <view class="wf-item-page">
        <image :src="item.image" mode="widthFix" class="item-img"/>
        <view class="item-info">
			<view class="area">{{item.area}}</view>
			<view class="date">{{item.date}}</view>
			<view class="condition">
				<view class="number">人数: {{item.number}}</view>
				<view class="status">{{item.status}}</view>
			</view>
			
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            require: true
        }
    }
}
</script>

<style lang="scss" scoped>
.wf-item-page {
    background: #ffffff;
    overflow: hidden;
    border-radius: 15rpx;
	padding: 10rpx;
	font-family: 'KaiTi','Times New Roman', Times, serif;
	box-shadow: 0px 0px 2px #d5d5d6;
}

.item-img {
    width: 100%;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.item-info {
    padding: 5px;
}

.area{
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	// background-color: #eee;
	// text-align: center;
	margin-bottom: 10rpx;
}
.date{
	height: 40rpx;
	font-size: 25rpx;
	// background-color: #eee;
	// text-align: center;
	color: #C0C0C0;
	margin-bottom: 10rpx;
}
.condition{
	color: #696969;
	font-size: 24rpx;
	display: flex;
	justify-content: space-between;
	// padding: 10rpx;
}
</style>
